<%@ page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/> <!-- 设置页面的基础路径，页面所有资源引入和页面跳转都基于bathPath -->

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,patientDiagnose-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
</head>
<body>
<article class="page-container">
    <!-- form的action中根据判断共享对象patientDiagnose是否为空，来指定表单提交的url -->
    <form class="form form-horizontal" action="${empty patientDiagnose ? 'patientDiagnose/insert.do' : 'patientDiagnose/update.do'}" method="post" id="patientDiagnoseForm">
        <!-- 在更新就诊信息的环境下把diagnoseId隐藏提交给后台 -->
        <input type="hidden" value="${patientDiagnose.diagnoseId }" name="diagnoseId" />
        <!-- 显示就诊ID -->
        <div class="row cl">
            <div class="block col-xs-4 col-sm-4">
                <div style="font-weight:bold">就诊ID: ${patientDiagnose.diagnoseId }</div>
            </div>
            <div class="block col-xs-8 col-sm-8" >
                <div style="font-weight:bold;color: red;">
                    处方费用: <span id="showRecipeMoney">${patientDiagnose.recipeMoney }</span>
                </div>
            </div>
        </div>

        <div class="row cl">
            <%--左边部分：患者基本信息--%>
            <div class="block col-xs-4 col-sm-4" style="background-color: lightgray;height: 450px;">
                <label style="font-weight: bold">患者信息</label>

                <div class="row cl left">
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>门诊挂号ID：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <%--在更新就诊信息的情况下，patientDiagnose不为空，就把门诊挂号ID锁定--%>
                        <c:if test="${empty patientDiagnose}">
                            <select name="patientRegisterId" id="patientRegisterId" class="select">
                                <option value="">请选择</option>
                                <c:forEach var="obj" items="${patientRegisters }">
                                    <option ${obj.patientRegisterId eq patientDiagnose.patientRegisterId ? 'selected' : '' }
                                            value="${obj.patientRegisterId }">${obj.patientRegisterId }</option>
                                </c:forEach>
                            </select>
                        </c:if>
                        <c:if test="${!empty patientDiagnose}">
                            <input type="text" name="patientRegisterId" id="patientRegisterId" disabled
                                   class="input-text" value="${patientDiagnose.patientRegisterId}"/>
                        </c:if>
                    </div>
                </div>

                <%--该参数用于展示，不提交，所有没有name属性--%>
                <div class="row cl left">
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>姓名：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.patientName }" id="patientName" >
                    </div>
                </div>
                <%--该参数用于展示，不提交，所有没有name属性--%>
                <div class="row cl left">
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>性别：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.patientGender eq 1 ? '男' : (patientDiagnose.patientGender eq 2 ? '女' : '')}"
                               id="patientGender">
                    </div>
                </div>
                <%--该参数用于展示，不提交，所有没有name属性--%>
                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>生日：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.patientBirthdayStr }" id="patientBirthday">
                    </div>
                </div>
                <%--该参数用于展示，不提交，所有没有name属性--%>
                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>住址：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.patientAddress }" id="patientAddress">
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>手机号：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text"
                               value="${patientDiagnose.patientMobile }" id="patientMobile" name="patientMobile">
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>过敏史：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                         <textarea id="allergicHistory" name="allergicHistory" class="textarea" style="height: 50px"
                                   placeholder="请输入患者过敏史（250字以内），没有则写无" >${patientDiagnose.allergicHistory }</textarea>
                    </div>
                </div>

            </div>


            <%--右边部分：诊断信息--%>
            <div class="block col-xs-8 col-sm-8" style="background-color: lightblue; height: 450px;">
                <label style="font-weight: bold">诊断信息</label>
                <%--该参数用于展示，不提交，所有没有name属性--%>
                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>挂号科室：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.registerDept }" id="registerDept" >
                    </div>
                    <%--该参数用于展示，不提交，所有没有name属性--%>
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>主治医师：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.doctor }" id="doctor">
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>主诉：</label>
                    <div class="formControls col-xs-10 col-sm-10">
                        <textarea id="symptoms" name="symptoms" class="textarea" style="height: 50px"
                                  placeholder="请输入患者主要症状（250字以内）" >${patientDiagnose.symptoms }</textarea>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>发病日期：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <input type="date" class="input-text" value="${patientDiagnose.symptomEmergeTimeStr }"
                                id="symptomEmergeTime" name="symptomEmergeTime" style="width: 150px">
                    </div>

                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>接诊类型：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <span class="select-box">
                            <select name="diagnoseType" id="diagnoseType" class="select">
                                <option value="">请选择</option>
                                <option ${patientDiagnose.diagnoseType eq 1 ? "selected" : ""} value="1">初诊</option>
                                <option ${patientDiagnose.diagnoseType eq 2 ? "selected" : ""} value="2">复诊</option>
                                <option ${patientDiagnose.diagnoseType eq 3 ? "selected" : ""} value="3">紧急诊</option>
                            </select>
                        </span>
                    </div>

                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>是否传染：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <span class="select-box">
                            <select name="isEpidemic" id="isEpidemic" class="select">
                                <option value="">请选择</option>
                                <option ${patientDiagnose.isEpidemic eq 0 ? "selected" : ""} value="0">否</option>
                                <option ${patientDiagnose.isEpidemic eq 1 ? "selected" : ""} value="1">是</option>
                            </select>
                        </span>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>诊断结果：</label>
                    <div class="formControls col-xs-10 col-sm-10">
                        <textarea id="diagnoseResult" name="diagnoseResult" class="textarea" style="height: 50px"
                                  placeholder="请输入诊断结果（250字以内）" >${patientDiagnose.diagnoseResult }</textarea>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>医生建议：</label>
                    <div class="formControls col-xs-10 col-sm-10">
                        <textarea id="advice" name="advice" class="textarea" style="height: 50px"
                                  placeholder="请输入医生建议（250字以内）" >${patientDiagnose.advice }</textarea>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>备注信息：</label>
                    <div class="formControls col-xs-10 col-sm-10">
                        <textarea id="remark" name="remark" class="textarea" style="height: 50px"
                                  placeholder="请输入备注信息（250字以内）" >${patientDiagnose.remark }</textarea>
                    </div>
                </div>

                <label style="font-weight: bold">处方信息</label>
                <div class="row cl right" >
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>处方：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <select name="recipeId" id="recipeId" class="select">
                            <option value="">请选择</option>
                            <c:forEach var="obj" items="${recipes }">
                                <option ${obj.recipeId eq patientDiagnose.recipeId ? 'selected' : '' }
                                        value="${obj.recipeId }">${obj.recipeName }</option>
                            </c:forEach>
                        </select>
                    </div>

                    <%--该参数用于展示，不提交，所有没有name属性--%>
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>处方类型：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.recipeType }" id="recipeType" name="recipeType">
                    </div>
                    <%--该参数用于展示，不提交，所有没有name属性--%>
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>处方费用：</label>
                    <div class="formControls col-xs-2 col-sm-2">
                        <input type="text" class="input-text" readonly="readonly" disabled
                               value="${patientDiagnose.recipeMoney }" id="recipeMoney" name="recipeMoney">
                    </div>
                </div>


            </div>
        </div>

        <div class="row cl">
            <div class="col-sm-4">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
            <div class="col-sm-8">
                <input class="btn btn-warning radius" type="reset" value="&nbsp;&nbsp;重置&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>

<script type="text/javascript">
    /*当选定门诊挂号ID后，对应的患者姓名、患者性别、患者生日、患者住址、挂号科室和住址医师则对应带出*/
    // 1.添加门诊挂号ID的onchange事件
    $("#patientRegisterId").change(function(){
        // 2.使用ajax请求，将当前选中的门诊挂号ID传到后台查询对应门诊挂号数据并返回
        $.ajax({
            url:"patientRegister/getPatientRegisterInfoById.do",
            type:"post",
            data:{patientRegisterId:$("#patientRegisterId").val()},
            async:true,
            dataType:"json",
            success:function(patientRegister){
                console.log(patientRegister);
                // 3.将获取到的数据填写到对应的输入框中
                $("#patientName").val(patientRegister.patientName);
                $("#patientGender").val(patientRegister.patientGender == 1 ? '男' : '女');
                $("#patientBirthday").val(patientRegister.patientBirthdayStr);
                $("#patientAddress").val(patientRegister.patientAddress);
                $("#registerDept").val(patientRegister.deptName);
                $("#doctor").val(patientRegister.doctorName);
            }
        });
    });

    /*当选定处方后，对应的处方类型和处方费用对应带出*/
    // 1.添加处方的onchange事件
    $("#recipeId").change(function(){
        // 2.使用ajax请求，将当前选中的处方ID传到后台查询对应处方数据并返回
        $.ajax({
            url:"recipe/getRecipeInfoById.do?recipeId="+$("#recipeId").val(),
            type:"get",
            async: true,
            dataType:"json",
            success:function(recipe){
                console.log(recipe);
                $("#recipeType").val(recipe.recipeTypeName);
                $("#recipeMoney").val(recipe.recipeMoney);
                $("#showRecipeMoney").text(recipe.recipeMoney);  //在最上方展示的处方费用
            }
        });
    });

</script>

<script type="text/javascript">
    /* 使用jquery-validation技术进行表单提交前的校验 */
    $().ready(function(){
        /* 在键盘按下并释放及表单提交时验证 */
        $("#patientDiagnoseForm").validate({
            // 校验规则
            rules:{
                patientRegisterId:{
                    required:true
                },
                patientMobile:{
                    required:true
                },
                allergicHistory:{
                    required:true,
                    maxlength:100
                },
                symptoms:{
                    required:true,
                    maxlength:250
                },
                symptomEmergeTime:{
                    required:true
                },
                diagnoseType:{
                    required:true
                },
                isEpidemic:{
                    required:true
                },
                diagnoseResult:{
                    required:true,
                    maxlength:250
                },
                advice:{
                    required:true,
                    maxlength:250
                },
                remark:{
                    required:true,
                    maxlength:250
                },
                recipeId:{
                    required:true
                }
            },

            //错误提示
            messages:{
                patientRegisterId:{
                    required:"门诊挂号ID不能为空"/*,
                    remote:"当前门诊挂号ID已经就诊"*/
                },
                patientMobile:{
                    required:"病人手机号不能为空"
                },
                allergicHistory:{
                    required:"请输入病人过敏史，没有则写无",
                    maxlength:"过敏史信息最多不能超多100字"
                },
                symptoms:{
                    required:"请输入病人的主要症状",
                    maxlength:"主要症状信息最多不能超多250字"
                },
                symptomEmergeTime:{
                    required:"请输入发病时间"
                },
                diagnoseType:{
                    required:"请选择诊断类型"
                },
                isEpidemic:{
                    required:"请选择是否传染"
                },
                diagnoseResult:{
                    required:"请输入诊断结果信息",
                    maxlength:"诊断结果信息最多不能超多250字"
                },
                advice:{
                    required:"请输入给病人的建议信息",
                    maxlength:"建议信息最多不能超多250字"
                },
                remark:{
                    required:"请输入备注信息",
                    maxlength:"备注信息最多不能超多250字"
                },
                recipeId:{
                    required:"请选择处方"
                }
            },

            /* 校验成功后的处理：
             *		1. 函数中的form就是上面表单的原始DOM对象
             * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
             * 		3. Jquery对象-->原生对象: Jquery对象[0]
             */
            submitHandler:function(form){
                // 1. 将表单序列化成json格式的对象
                var jsonData = $("#patientDiagnoseForm").serializeJSON();
                // 2. 将json对象转成json格式字符串(因为后台SpringMVC不能接收json对象，但是可以接收标准JSON格式字符串)
                var jsonDataString = JSON.stringify(jsonData);
                console.log(jsonDataString);  //打印调试
                // 3. 通过ajax将数据提交到后台
                $.ajax({
                    url:"${empty patientDiagnose? 'patientDiagnose/insert.do' : 'patientDiagnose/update.do'}",
                    type:"post",
                    data:jsonDataString, //提交给后台的数据(请求体)
                    contentType:"application/json;charset=utf-8",  //提交给后台的数据类型
                    success:function(data){
                        console.log(data);
                        layer.msg(data.msg,{icon:data.code},function(){
                            if(data.code == 1){  //说明新增或更新数据成功
                                parent.refreshTable();  //刷新父页面
                                parent.layer.closeAll(); //关闭父页面
                            }
                        });
                    }
                });
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
